<template>
  <div>
    <el-dialog
      :model-value="open"
      :close-on-click-modal="false"
      :title="title"
      :before-close="handleClose"
    >
      <el-form
        ref="editform"
        inline
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="meterNumber">
              <el-input v-model="form.meterNumber" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号名称" prop="printCode">
              <el-input v-model="form.printCode" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号类型" prop="accountType">
              <el-input v-model="form.accountType" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号密钥" prop="accountKey">
              <el-input v-model="form.accountKey" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号密码" prop="password">
              <el-input v-model="form.password" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="托运人编码" prop="accountNumber">
              <el-input v-model="form.accountNumber" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货人地址" prop="shipperAddressId">
              <el-select
                v-model="form.shipperAddressId"
                filterable
                clearable
                style="width: 90%;"
              >
                <el-option
                  v-for="dict in dicts[DictDirection.发货人地址]"
                  :key="dict.id"
                  :label="dict.address1"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务商渠道" prop="serviceProviderId">
              <el-select
                v-model="form.serviceProviderId"
                filterable
                clearable
                style="width: 90%;"
              >
                <el-option
                  v-for="dict in dicts[DictDirection.服务渠道]"
                  :key="dict.id"
                  :label="dict.channelChName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in dicts[DictDirection.账户状态]" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                clearable
                style="width: 90%;"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { ElMessage, ElButton } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { addOrderPrint, updateOrderPrint } from '@/api/system/singleAccount'

const dicts = useDicts()
dicts.setDicts(DictDirection.发货人地址)
dicts.setDicts(DictDirection.服务渠道)
dicts.setDicts(DictDirection.账户状态)
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  open: {
    type: Boolean,
  },
})
const emit = defineEmits(['changeList', 'update:open'])
// 表单参数
// eslint-disable-next-line prefer-const
const form = ref({
    id: undefined,
    roleId: undefined,
    meterNumber: undefined,
    printCode: undefined,
    accountType: undefined,
    accountKey: undefined,
    password: undefined,
    accountNumber: undefined,
    shipperAddressId: undefined,
    serviceProviderId: undefined,
    status: 1,
    remark: undefined,
  }),
  rules = {
    meterNumber: [{ required: true, message: '账号必填', trigger: 'blur' }],
    printCode: [{ required: true, message: '账号名称必填', trigger: 'blur' }],
    accountType: [{ required: true, message: '账号类型必填', trigger: 'blur' }],
    accountKey: [{ required: true, message: '账号密钥必填', trigger: 'blur' }],
    password: [{ required: true, message: '账号密码必填', trigger: 'blur' }],
    accountNumber: [{ required: true, message: '托运人编码必填', trigger: 'blur' }],
    shipperAddressId: [{ required: true, message: '发货人地址ID必填', trigger: 'blur' }],
    serviceProviderId: [{ required: true, message: '服务商ID必填', trigger: 'blur' }],
    status: [{ required: true, message: '账号状态必须选择', trigger: 'change' }],
  },
  // 新增修改表单
  editForm = ref(null),
  {
    proxy,
  }:{
   proxy:any
 } = getCurrentInstance()

// 重置新增修改列表
const reset = () => {
  form.value = {
    id: undefined,
    roleId: undefined,
    meterNumber: undefined,
    printCode: undefined,
    accountType: undefined,
    accountKey: undefined,
    password: undefined,
    accountNumber: undefined,
    shipperAddressId: undefined,
    serviceProviderId: undefined,
    status: 1,
    remark: undefined,
  }
  proxy.$resetForm(editForm.value)
}
// 新增修改——确定
const submitForm = () => {
  proxy.$validateForm(editForm.value, () => {
    console.log('44')
    if (form.value.id != undefined) {
      updateOrderPrint(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success('修改成功')
          reset()
          emit('update:open', false)
          emit('changeList')
        }
      })
    } else {
      addOrderPrint(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success('新增成功')
          reset()
          emit('update:open', false)
          emit('changeList')
        }
      })
    }
  })
}
// 修改新增——取消
const cancel = () => {
  reset()
  emit('update:open', false)
}
const handleClose = () => {
  emit('update:open', false)
}

defineExpose({
  form,
})
</script>